<template>
	<div class="markerIcon">
		<el-dialog title="图标列表" :visible.sync="dialogVisible" width="800px" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
			<div class="markerIconList">
				<el-scrollbar wrap-class="scrollbar-wrapper" class="markerIconListscrollbar">
					<div class="itemImgList" v-for="(item, index) in iconList" :key="index" :class="selectIconId == item.id?'confirmSelect':''">
						<img :src="item.iconUrl" alt="" class="itemImg" @click="confirmSelect(item, index)" >
					</div>
				</el-scrollbar>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="confirm">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		props:['iconUrls'],
		data() {
			return {
				dialogVisible: true,
				iconList: [],
				// icon: 'http://59.110.54.18:3000/bigemap.js/v2.1.0/images/marker-icon.png',
				selectIconUrl: '',
				selectIconId: ''
			}
		},
		mounted() {
			this.getPageData()
		},
		methods:{
			cancel(){
				this.$emit('showhideMarkerIcon')
			},
			confirmSelect(item, index){
				this.selectIconUrl = item.iconUrl
				this.selectIconId = item.id
			},
			confirm(){
				if(this.selectIconUrl){
					this.$emit('updateMarkerIcon', this.selectIconUrl)
					this.$emit('showhideMarkerIcon')
					// this.$parent.isShowMarkerIcon = false
					this.selectIconUrl = ''
				} else {
					this.$alert('请选择图标')
				}
				
			},
			getPageData(){
				this.$request.get('/api/orchard/getMapIconUrl').then(res=>{
					if(res.code == 200){
						this.iconList = res.data
						let defaultIcon = this.iconList.filter(item=>{
							if(item.iconUrl == this.iconUrls){
								return item
							}
						})
						this.selectIconId = defaultIcon[0].id
						console.log(defaultIcon)
					}
				})
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.markerIconList{
		height: 350px;
		overflow: hidden;
		.markerIconListscrollbar{
			height: 367px;
		}
		.confirmSelect{
			background: rgba(36,177,78,0.5);
			border-radius: 5px;
		}
		.itemImgList{
			width: 6%;
			// height: 40px;
			margin-left: 1%;
			// margin-bottom: 1%;
			display: inline-block;
			padding: 1% 1%;
			&:nth-child(14n+1){
				margin-left: 0;
			}
			&:hover{
				background: rgba(36,177,78,0.5);
				border-radius: 5px;
				// box-shadow: 0 0 10px 1px rgb(36,177,78);
			}
			.itemImg{
				display: block;
				height: 32px;
				width: 32px;
				position: relative;
				left: 50%;
				transform: translateX(-50%);
				cursor: pointer;
			}
			
		}
	}
</style>
